
import { Button } from 'antd'
import { CodepenCircleOutlined, CaretRightOutlined } from '@ant-design/icons';
import React, { useCallback, useState } from 'react'

import "./LiveRoomContro.scss"
import { setControl } from '../../utils';

export default function LiveRoomContro(props) {
    const [co,setCo] = useState(false);
    const dispatcher = props.dispatcher;
    const runCode = props.runCode;
    const toggleCodeEdit = useCallback(()=>{
        dispatcher({
            type: "setCodeEdit",
            codeEdit: !props.state.codeEdit
        });
    },[props]);
    const handleCo = () => {
        setCo(!co);
        setControl(!co);
    }
    return (
        <div className='LiveRoomContro-container'>
            {
                props.state.codeEdit
                ?<Button type="primary" danger shape="round" icon={<CodepenCircleOutlined />} size="middle" onClick={toggleCodeEdit}>隐藏Code</Button>
                :<Button type="primary" shape="round" icon={<CodepenCircleOutlined />} size="middle" onClick={toggleCodeEdit}>显示Code</Button>
            }
            {
                <Button type="primary" shape="round" icon={<CaretRightOutlined />} size="middle" onClick={runCode}>运行Code</Button>
            }
            {
                !co
                ?<Button type="primary"  shape="round" icon={<CodepenCircleOutlined />} size="middle" onClick={handleCo}>开启拖拽</Button>
                :<Button type="primary" danger shape="round" icon={<CodepenCircleOutlined />} size="middle" onClick={handleCo}>关闭拖拽</Button>
            }
        </div>
    )
}
